<template>
	<view class="popularGames" :style="{'background': theme.backgroundColor}" >
		<mescroll-uni :down="downOption" :up="upOption"  :fixed="false" ref="mescrollRef" @init="mescrollInit"
						@down="downCallback" @up="upCallback">
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px'}" class="index_nav">
			<view class="index_nav_banner">
				<image :src="theme.index_nav_banner"></image>
			</view>
			<view class="nav_head" >
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_search">
						<image src="../../static/popularGames/search.png"  @click="navigateTo('search')"></image>
					</view>
					<view class="head_right_more">
						<image src="../../static/popularGames/more.png"  @click="navigateTo('serve')"></image>
					</view>
				</view>
			</view>
			<view class="nav_shop" @click="navigateTo('myShop', `id=${shop_data.id}`)">
				<view class="nav_shop_image">
					<image :src="theme.nav_shop_image"></image>
				</view>
				<view class="nav_shop_title">淘气游甄选优质店铺</view>
				<view class="nav_shop_body" :style="{'background': theme.nav_shop_body}">
					<image :src="shop_data.img" mode=""></image>
					<!-- <view class="body_box">
						<view class="box_img">
							<image :src="shop_data.img" mode=""></image>
						</view>
						<view class="box_title">
							<text >{{shop_data.name}}</text>
						</view>
					</view>
					<view class="box_button" :style="{'background': theme.backgroundColor}"  >进入店铺</view> -->
				</view>
			</view>
		</view>
		
		<!-- 头部 -->
		<view :style="{'paddingTop':StatusBar + 'px', 'background': theme.backgroundColor}" v-if="headerIf" class="index_nav index_nav_fxed">
			<view class="nav_head">
				<view class="header_back" @click="navigateBack()">
					<image src="../../static/popularGames/return.png"></image>
				</view>
				<view class="head_right">
					<view class="head_right_search">
						<image src="../../static/popularGames/search.png"  @click="navigateTo('search')"></image>
					</view>
					<view class="head_right_more">
						<image src="../../static/popularGames/more.png"  @click="navigateTo('serve')"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 内容 -->
		<view class="popularGames_body">
			<view class="popularGames_body_screen"  :class="theme.back_dark == 'dark' ? 'dark_class' : 'light_class'">
				<view class="popularGames_body_screen_left" @click="show = true">
					<view class="popularGames_body_screen_left_text">{{ data.sort_name }}</view>
					<view class="popularGames_body_screen_left_lower"></view>
				</view>
				<view class="popularGames_body_screen_right" @click="tap_select()">
					<view class="popularGames_body_screen_left_text">{{ data.screen_name }}</view>
					<view class="popularGames_body_screen_left_lower"></view>
				</view>
			</view>
			
			<view class="body_list">

					<view class="list_item u-border-bottom" @click="navigateTo('popularDetail', `?id=${item.id}`)" v-for="(item, index) in goods_data" :key="index"  :style="{'background': theme.itemColor}">
						<view class="item_img">
							<image :src="item.img"></image>
							<view class="item_img_bottom">
								<view class="item_img_number" >
									<view class="item_img_number_icone">
										<image src="../../static/popularGames/check.png"></image>
									</view>
									{{ item.count }}
								</view>
								<view class="item_img_price">上传时间：{{ item.update_time }}</view>
							</view>
						</view>
						<view class="item_content">
							<view class="item_content_tflex">
								<view class="item_content" :class="theme.back_item">
									<view class="content_title">
										{{ item.title }}
									</view>
									<view class="item_content_price">
										<view class="item_content_price_img">
											<image :src="theme.back_pice" mode=""></image>
										</view>
										<view class="item_content_price_ti">{{ item.price }}</view>
									</view>
								</view>
							</view>
							<view class="content_tag">
								<view class="tag_chaozhi" :class="theme.back_item">
									<view class="chaozhi_img">
										<image src="../../static/popularGames/buying.png"></image>
									</view>
									<view class="chaozhi_text">超值购买</view>
								</view>
								<view class="tag_chaozhi" :class="theme.back_item">
									<view class="chaozhi_img">
										<image src="../../static/popularGames/selection.png"></image>
									</view>
									<view class="chaozhi_text">皮肤任选</view>
								</view>
								<view class="tag_chaozhi" :class="theme.back_item">
									<view class="chaozhi_img">
										<image src="../../static/popularGames/sheng.png"></image>
									</view>
									<view class="chaozhi_text">膜拜大神</view>
								</view>
								<view class="tag_chaozhi" :class="theme.back_item">
									<view class="chaozhi_img">
										<image src="../../static/popularGames/level.png"></image>
									</view>
									<view class="chaozhi_text">级别超高</view>
								</view>
							</view>
						</view>
						
					</view>
				
			</view>
		
		</view>
		</mescroll-uni>
		<u-popup :show="select_show" mode="right">
		        <view class="select_box" >
					<view class="right_system">
						<view class="system_title">游戏系统</view>
						<view class="system_list">
							<view class="list_item" v-for="item in select_data.system_list" :key="item.id" :class="system == item.id ? 'active' : ''" @click="tap_system(item)">{{item.name}}</view>
						</view>
					</view>
					
					<view class="right_attribute">
						<view class="attribute_item" v-for="item in select_data.attribute_list" :key="item.id">
							<view class="item_title">{{item.name}}</view>
							<view class="item_content">
								<view  class="content_t" v-if="item.type == 0 || item.type == 1 ">
									 <u--input :placeholder="item.tips" border="surround" v-model="item.value"></u--input>
								</view>
								<view class="content_d" v-if="item.type == 2 || item.type == 3">
									<view class="content_items" :class="items.value ? 'active' : ''" v-for="items in item.list" :key="items.id"  @click="tap_attribute(item, items)">
										{{items.name}}
									</view>
								</view>
							</view>
						</view>
						
					</view>
					<view class="right_role">
						<view class="role_item" v-for="item in select_data.role_list" :key="item.id">
							<view class="item_title">{{item.name}}</view>
							<view class="item_content">
								<view class="content_items" :class="items.value ? 'active' : ''" v-for="items in item.list" :key="items.id"   @click="tap_role(item, items)">
									{{items.name}}
								</view>
							</view>
						</view>
						
					</view>
					<view class="select_bottom">
						<view class="bottom_item" @click="tap_select_colse()">关闭</view>
						<view class="bottom_item" @click="tap_select_ref()">重置</view>
						<view class="bottom_item" @click="tap_select_ok()" style="background: -webkit-gradient(linear,100% 0,0 0,from(#ff5b3b),to(#f64f2e));border: none;color: #fff;">确认</view>
					</view>
		        </view>
			</u-popup>
		<u-loading-page style="z-index:9999" bg-color="#FCFCFF" image="../../static/logo.gif"  icon-size="140"  loading-text="正在加载请您耐心等待..."  fontSize="26rpx"  :loading="loading"></u-loading-page>
		<u-picker :show="show" :columns="[sortList]" keyName="name" :closeOnClickOverlay="true" title="排序"
			@close="cancel" @cancel="cancel" @confirm="confirm"></u-picker>
		<u-picker :show="screen_show" :columns="[screenList]" keyName="name" :closeOnClickOverlay="true" title="筛选"
			@close="cancel" @cancel="cancel" @confirm="confirms"></u-picker>
	</view>
</template>

<script>
	import { game_style,  goods_list, goods_shop, game_select} from '@/api/game'
	export default {
		data() {
			return {
				select_show:false,
				system: '',
				search_system: '',
				select_data: [],
				search_data:{},
				shop_data: {},
				loading: true,
				style_data: {},
				goods_data: [],
				game_id: null,
				headerIf: false,
				mescroll: null,
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多了 --', // 没有更多数据的提示文本
					offset: 200,
					noMoreSize: 2,
					empty: {
						icon: '',
						tip: '没有数据~试试修改筛选条件或查看其他游戏'
					},
					page: {
						num: 1,
						size: 10
					}
				},
				page: 1,
				pageSize: 10,
				total: null, //服务器数量
				localTotal: 0, //本地已经加载数量
				theme: {
					backgroundColor: '',
					nav_shop_body: '',
					itemColor: '',
					nav_shop_image: '',
					index_nav_banner: '',
					back_item: ''
				},
				StatusBar: this.StatusBar,
				show: false,
				screen_show: false,
				list: [],
				data: {
					sort: '1',
					sort_name: '默认排序',
					screen: '',
					screen_name: '筛选细分'
				},
				sortList: [
					{
						name: '默认排序',
						id: 1
					},
					{
						name: '顶级账号',
						id: 2
					},
					{
						name: '可买包赔',
						id: 3
					},
					{
						name: '平台代售',
						id: 4
					}
				],
				screenList: [
					{
						name: '升级中',
						id: 1
					}
					
				]
			}
		},
		onShow() {
		},
		onLoad(option){
			if ('id' in option) {
				this.game_id = option.id
				this.game_style(option.id)
				this.goods_shop(option.id)
				this.game_select(option.id)
				this.goods_list()
			}else {
				uni.switchTab({url: '/pages/buy/buy'})
			}
			if(this.game_id == 3) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #75A3FF 50%, #F1F6FF 100%)', // 背景颜色
				this.theme.back_dark = 'blue', // 背景颜色 clas
				this.theme.nav_shop_body = '#E6EDFF', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'blue', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/wzry/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/wzry/banner.png'; // 头部背景
			}
			if(this.game_id == 4) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #FFE191 50%, #F1F6FF 100%)', // 背景颜色
				this.theme.back_dark = 'yellow', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFF3D5', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'yellow', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/hpjy/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/hpjy/banner.png'; // 头部背景
			}
			if(this.game_id == 5) {
				this.theme.backgroundColor = '#151A20', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#E6EDFF', // 店铺内容背景颜色
				this.theme.itemColor = '#252A34', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/wwqy/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/wwqy/banner.png'; // 头部背景
			}
			
			if(this.game_id == 6) {
				this.theme.backgroundColor = '#252A34', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#E6EDFF', // 店铺内容背景颜色
				this.theme.itemColor = '#151A20', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/yjwj/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/yjwj/banner.png'; // 头部背景
			}
			
			if(this.game_id == 7) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #4D72AF 50%, #F2F7FF 100%)', // 背景颜色
				this.theme.back_dark = 'blue1', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'blue1', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/cyhx/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/cyhx/banner.png'; // 头部背景
			}
			if(this.game_id == 9) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #14322F 50%, #151A20 100%)', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#252A34', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/qzwz/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/qzwz/banner.png'; // 头部背景
			}
			if(this.game_id == 10) {
				this.theme.backgroundColor = '#201914', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#252A34', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/yxlm/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/yxlm/banner.png'; // 头部背景
			}
			if(this.game_id == 11) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #EFE5D1 50%, #FFFCF5 100%)', // 背景颜色
				this.theme.back_dark = 'yellow', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFBE5', // 店铺内容背景颜色
				this.theme.itemColor = '#ffffff', // item颜色
				this.theme.back_item = 'yellow', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/money.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/ys/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/ys/banner.png'; // 头部背景
			}
			
			if(this.game_id == 12) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #8EC15D 50%, #F7FCF2 100%)', // 背景颜色
				this.theme.back_dark = 'green', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'green', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/dxcyys/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/dxcyys/banner.png'; // 头部背景
			}
			if(this.game_id == 13) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #5E3F68 50%, #FFF9F8 100%)', // 背景颜色
				this.theme.back_dark = 'yellow', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'yellow', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/dxcsy/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/dxcsy/banner.png'; // 头部背景
			}
			
			if(this.game_id == 14) {
				this.theme.backgroundColor = 'linear-gradient( 180deg, #963F26 50%, #F7FCF2 100%)', // 背景颜色
				this.theme.back_dark = 'yellow', // 背景颜色 clas
				this.theme.nav_shop_body = '#FFFAF0', // 店铺内容背景颜色
				this.theme.itemColor = '#FFFFFF', // item颜色
				this.theme.back_item = 'yellow', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/hyrz/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/hyrz/banner.png'; // 头部背景
			}
			
			if(this.game_id == 15) {
				this.theme.backgroundColor = '#151A20', // 背景颜色
				this.theme.back_dark = 'dark', // 背景颜色 clas
				this.theme.nav_shop_body = '#F0F1FF', // 店铺内容背景颜色
				this.theme.itemColor = '#252A34', // item颜色
				this.theme.back_item = 'dark', // 标题背景颜色 class
				this.theme.back_pice = '../../static/popularGames/moneys.png', // 价格图标
				this.theme.nav_shop_image = '../../static/popularGames/wllt/banner_back.png'; // 优质店铺 背景
				this.theme.index_nav_banner = '../../static/popularGames/wllt/banner.png'; // 头部背景
			}
			
	
		},

		onPageScroll(e) {
			this.headerIf = e.scrollTop > 15
		},
		methods: {
			tap_select(){
				this.select_data = this.search_data
				this.system = this.search_system
				this.select_show= true
			},
			tap_select_colse() {
				this.select_show = false
			},
			tap_select_ref(){
				this.game_select(this.game_id)
				this.search_system = ''
				this.select_show = false
				this.mescroll.triggerDownScroll()
			},
			tap_select_ok(){
				this.search_data = this.select_data
				this.search_system = this.system
				this.select_show = false
				this.mescroll.triggerDownScroll()
			},
			tap_system(v) {
				if(this.system != v.id) {
					this.system = v.id
				}else {
					this.system = ''
				}
				
			},
			tap_attribute(v, vs) {
				if(!vs.value) {
					v.list.forEach(item=> item.value = '')
					vs.value = 1
					this.select_data.attribute_list.forEach(item=> {
						if (item.id == v.id) {
							item.list = JSON.parse((JSON.stringify(v.list)))
						}
					})
				}else {
					vs.value = ''
				}
			},
			tap_role(v, vs) {
				if(!vs.value) {
					vs.value = 1
					this.select_data.role_list.forEach(item=> {
						if (item.id == v.id) {
							item.list = JSON.parse((JSON.stringify(v.list)))
						}
					})
				}else {
					vs.value = ''
				}
			},
			async game_select(game_id) {
				let data = await game_select({game_id})
				if (data) {
					this.search_data = data.data
				}
			},
			async goods_shop(game_id) {
				let data = await goods_shop({game_id})
				if (data) {
					this.shop_data = data.data
				}
			},
			async game_style(id) {
				let data = await game_style({id})
				if (data) {
					this.style_data = data.data
				}
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				// //全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			async goods_list() {
				let attribute = {}
				let role = {}
				if(this.select_data.length != 0) {
					this.search_data.attribute_list.forEach(item=> {
						if (item.type == 0 ||item.type == 1) {
							if(item.value){
								attribute[`${item.key}`] = item.value
							}
						}else if (item.type == 2 ||item.type == 3){
							item.list.forEach(items=>{
								if(items.value) {
									attribute[`${item.key}`] = items.id
								}
							})
						}
					})
					this.search_data.role_list.forEach(item=> {
						role[`${item.id}`] = []
						item.list.forEach(items=>{
							if(items.value) {
								role[`${item.id}`].push(items.id)
							}
						})
						if (!role[`${item.id}`].length) {
							delete role[`${item.id}`]
						}
					})
					for (let key in role) {  
					  role[key] = role[key].join(',')
					}  
				}
				
				let param = {
					page: this.page,
					pageSize: this.pageSize,
					game_id: this.game_id,
					sort: this.data.sort,
					system: this.search_system,
					attribute: JSON.stringify(attribute),
					role: JSON.stringify(role)
					
				}
				let data = await goods_list(param)
				this.loading = false
				data = data.data
				if (this.page == 1) {
					this.goods_data = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.goods_data = [...this.goods_data, ...data.list]
				}
				
				this.total = data.page.total
				
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}

				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			downCallback() {
				this.page = 1
				this.goods_list()
			},
			upCallback(page) {
				this.page += 1
				this.goods_list()
			},
			cancel() {
				this.show = false
				this.screen_show = false
			},
			confirm(row) {
				this.data.sort = row.value[0].id
				this.data.sort_name = row.value[0].name
				this.show = false
				this.mescroll.triggerDownScroll()
			},
			confirms(row) {
				this.screen_show = false
			}
		}
	}
</script>

<style lang="less" scoped>
	* {
		margin: 0;
		padding: 0;
	}
	.popularGames {
		display: flex;
		flex-direction: column;
		height: 100vh;
		overflow-y: scroll;
		// 头部
		.index_nav {
			position: relative;
			margin-bottom: 0;
			padding-bottom: 0;
			.index_nav_banner {
				position: absolute;
				top: 0;
				width: 100%;
				height: 490rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.nav_head {
				height: 76rpx;
				box-sizing: border-box;
				padding: 0 32rpx;
				display: flex;
				margin-bottom: 0;
				padding-bottom: 0;
				align-items: center;
				.header_back {
					position: relative;
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.head_text {
					font-size: 32rpx;
					color: rgba(0, 0, 0, 0.6);
					font-weight: bold;
				}
				.head_right {
					margin-left: auto;
					display: flex;
					image {
						width: 100%;
						height: 100%;
					}
					.head_right_search {
						width: 68rpx;
						height: 68rpx;
						position: relative;
					}
					.head_right_more {
						width: 68rpx;
						height: 68rpx;
						position: relative;
						margin-left: 20rpx;
					}
				}
			}
			.nav_shop {
				position: relative;
				width: 686rpx;
				height: 384rpx;
				margin: 0 auto;
				// margin-top: 285rpx;
				margin-top: 330rpx;
				padding-top: 14rpx;
				.nav_shop_image {
					width: 686rpx;
					height: 304rpx;
					position: absolute;
					top: 0;
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				.nav_shop_title {
					font-weight: bold;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 52rpx;
					text-align: center;
					position: relative;
					z-index: 2;
					font-style: normal;
					text-transform: none;
					margin-bottom: 12rpx;
				}
				
				.nav_shop_body {
					width: 650rpx;
					height: 172rpx;
					position: relative;
					z-index: 2;
					background: #FFE8E7;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					margin: 0 auto;
					box-sizing: border-box;
					overflow: hidden;
					image {
						width: 100%;
						height: 100%;
					}
					.body_box {
						display: flex;
						align-items: center;
						justify-content: center;
						.box_img {
							width: 80rpx;
							height: 80rpx;
							border-radius: 50%;
							overflow: hidden;
							image {
								width: 100%;
								height: 100%;
							}
						}
						.box_title {
							margin-left: 20rpx;
							font-size: 32rpx;
							color: #3c3c3c;
							font-weight: bold;
						}
					}
					.box_button {
						margin: 0 auto;
						width: 160rpx;
						height: 60rpx;
						background: #EFB0CE;
						border-radius: 50rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 28rpx;
						color: #fff;
					}
				}
			}
			
		}
		.index_nav_fxed {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 100;
		}
		// 内容
		.popularGames_body {
			box-sizing: border-box;
			padding: 0 32rpx;
			padding-top: 0;
			margin-top: -80rpx;
			position: relative;
			z-index: 2;
			.popularGames_body_screen {
				width: 686rpx;
				height: 92rpx;
				border-radius: 76rpx 76rpx 76rpx 76rpx;
				margin: 0 auto;
				display: flex;
				justify-content: center;
				align-items: center;
				.popularGames_body_screen_left_text {
					font-weight: 500;
					font-size: 28rpx;
					color: #FFFFFF;
					line-height: 33rpx;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}

				.popularGames_body_screen_right {
					margin-left: 158rpx;
				}
				> view {
					display: flex;
				}
			}
			.dark_class {
				background-color: rgba(255,255,255,0.1);
				.popularGames_body_screen_left_lower {
					width: 36rpx;
					height: 36rpx;
					background: url(~@/static/popularGames/lower.png) no-repeat;
					background-size: 100%;
					margin-left: 12rpx;
				}
				
				.popularGames_body_screen_left_text {
					color: #FFF;
				}
			}
			.light_class {
				background-color: #FFFFFF;
				.popularGames_body_screen_left_lower {
					width: 36rpx;
					height: 36rpx;
					background: url(~@/static/popularGames/lower_guan.png) no-repeat;
					background-size: 100%;
					margin-left: 12rpx;
				}
				.popularGames_body_screen_left_text {
					color: #13171D;
				}
			}
			.body_list {
				margin-top: 16rpx;
				height: 100%;
				/deep/ .list_item {
					width: 686rpx;
					height: 454rpx;
					overflow: hidden;
					border-radius: 20rpx 20rpx 20rpx 20rpx;
					padding-top: 16rpx;
					margin-bottom: 16rpx;
					background-color: #fff;
					.item_img {
						width: 662rpx;
						height: 230rpx;
						border-radius: 20rpx 20rpx 20rpx 20rpx;
						position: relative;
						margin: 0 auto;
						overflow: hidden;
						image {
							width: 100%;
							height: 100%;
						}
						.item_img_bottom{
							position: absolute;
							bottom: 0rpx;
							padding-bottom: 8rpx;
							width: 100%;
							display: flex;
							align-items: center;
							background: linear-gradient( 0deg, #42465E 0%, rgba(148,148,148,0) 100%);
							justify-content: space-between;
							.item_img_number {
								font-weight: bold;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								display: flex;
								align-items: center;
								margin-left: 20rpx;
								.item_img_number_icone { 
									width: 36rpx;
									height: 36rpx;
									margin-right: 8rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
							}
							.item_img_price {
								margin-left: auto;
								font-weight: bold;
								font-size: 20rpx;
								color: #FFFFFF;
								line-height: 23rpx;
								text-align: left;
								font-style: normal;
								text-transform: none;
								display: flex;
								align-items: center;
								margin-right: 20rpx;
							}
						}
					}
					.item_content {
						.item_content_tflex {
							width: 662rpx;
							margin: 0 auto;
							margin-top: 16rpx;
							.item_content {
								display: flex;
								align-items: center;
								margin-top: 24rpx;
								.content_title{
									font-family: PingFang SC, PingFang SC;
									font-weight: 500;
									font-size: 24rpx;
									width: 496rpx;
									line-height: 28rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									text-overflow: ellipsis;
									overflow: hidden;
									margin-left: 24rpx;
								}
								.item_content_price{
									display: flex;
									align-items: center;
									margin-left: 28rpx;
									.item_content_price_img {
										width: 32rpx;
										height: 32rpx;
										margin-right: 8rpx;
										image {
											width: 100%;
											height: 100%;
										}
									}
									
									.item_content_price_ti {
										font-family: PingFang SC, PingFang SC;
										font-weight: bold;
										font-size: 36rpx;
										height: 42rpx;
										text-align: left;
										font-style: normal;
									}
								}
							}
							.dark {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 85deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #FFFFFF;
								}
								
								.item_content_price {
									color: #FFFFFF;
								}
							}
							
							.powder {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 88deg, #E4CBE6 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #13171D;
								}
								
								.item_content_price {
									color: #13171D;
								}
							}
							
							.blue {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 90deg, #D5F5FF 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #13171D;
								}
								
								.item_content_price {
									color: #13171D;
								}
							}
							.blue1 {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 90deg, #E0EEFF 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #13171D;
								}
								
								.item_content_price {
									color: #13171D;
								}
							}
							.green {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 90deg, #E5FFD5 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #13171D;
								}
								
								.item_content_price {
									color: #13171D;
								}
							}
							.yellow {
								width: 662rpx;
								height: 116rpx;
								background: linear-gradient( 90deg, #FFF3D5 0%, rgba(255,255,255,0) 100%);
								border-radius: 20rpx 20rpx 20rpx 20rpx;
								.content_title{
									color: #13171D;
								}
								
								.item_content_price {
									color: #13171D;
								}
							}
						}
						.content_tag {
							display: flex;
							align-items: center;
							margin-left: 12rpx;
							margin-top: 20rpx;
							.tag_chaozhi {
								width: 154rpx;
								height: 40rpx;
								border-radius: 68rpx 68rpx 68rpx 68rpx;
								display: flex;
								margin-right: 8rpx;
								.chaozhi_img {
									width: 36rpx;
									height: 36rpx;
									margin-left: 4rpx;
									image {
										width: 100%;
										height: 100%;
									}
								}
								.chaozhi_text {
									font-family: PingFang SC, PingFang SC;
									font-weight: bold;
									font-size: 20rpx;
									line-height: 40rpx;
									text-align: left;
									font-style: normal;
									text-transform: none;
									margin-left: 8rpx;
								}
							}
							.dark {
								background: linear-gradient( 90deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color:#FFFFFF;
								}
							}
							.powder {
								background:  linear-gradient( 90deg, #EFB0CE 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color: #13171D;
								}
							}
							.blue {
								background: linear-gradient( 90deg, #D5F5FF 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color: #13171D;
								}
							}
							.blue1 {
								background: linear-gradient( 90deg, #E0EEFF 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color: #13171D;
								}
							}
							.green {
								background: linear-gradient( 90deg, #E5FFD5 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color: #13171D;
								}
							}
							.yellow {
								background: linear-gradient( 90deg, #FFF3D5 0%, rgba(255,255,255,0) 100%);
								.chaozhi_text{
									color: #13171D;
								}
							}
						}
					}
				}
			}
		}
	}
	
.select_box {
	width: 680rpx;
	overflow-y: scroll;
	height: 100vh;
	box-sizing: border-box;
	padding: 26rpx 36rpx 88rpx;

	.active {
		background: rgba(246,79,46,.1)!important;
		color: #f64f2e;
	}
	.right_system {
		.system_title {
			font-size: 24rpx;
			color: #212121;
		}
		.system_list {
			display: flex;  
			flex-wrap: wrap;
			color: #212121;
			.list_item {
				text-align: center;
				box-sizing: border-box;
				padding: 14rpx;
				margin-top: 24rpx;
				margin-right: 24rpx;  
				width: calc(33.3333% - 24rpx);
				background: #f8f8f8;
				border-radius: 10rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20rpx;
				&:nth-child(3n) {  
				  margin-right: 0;  
				}
			}
		}
	}
	.right_attribute {
		.attribute_item {
			margin-top: 48rpx;
			color: #212121;
			.item_title {
				font-size: 24rpx;
				color: #212121;
			}
			.item_content {
				color: #212121;
				.content_t {
					.u-input {
						margin-top: 24rpx;
						height: 58rpx;
						box-sizing: border-box;
						/deep/.uni-input-wrapper {
							font-size: 20rpx!important;
						}
					}
				}
				.content_d {
					display: flex;
					flex-wrap: wrap;
					.content_items {
						text-align: center;
						margin-top: 24rpx;
						box-sizing: border-box;
						padding: 14rpx;
						margin-right: 24rpx;  
						width: calc(33.3333% - 24rpx);
						background: #f8f8f8;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						&:nth-child(3n) {  
						  margin-right: 0;  
						}
					}
				}
				
			}
		}
	}
	
	.right_role {
		margin-bottom: 166rpx;
		.role_item {
			margin-top: 48rpx;
			color: #212121;
			.item_title {
				font-size: 24rpx;
				color: #212121;
			}
			.item_content {
				display: flex;
				flex-wrap: wrap;
				.content_items {
					text-align: center;
					margin-top: 24rpx;
					box-sizing: border-box;
					padding: 14rpx;
					margin-right: 24rpx;  
					width: calc(33.3333% - 24rpx);
					background: #f8f8f8;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					&:nth-child(3n) {  
					  margin-right: 0;  
					}
				}
			}
		}
		
	}
	
	.select_bottom {
		box-sizing: border-box;
		padding:  0 20rpx;
		position: fixed;
		bottom: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid hsla(0,0%,62.7%,.14);
		width: 680rpx;
		height: 88rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;  
		.bottom_item {
			width: calc(33.3333% - 30rpx); /* 减去左右margin的值 */  
			margin: 0 15rpx; /* 设置左右margin为10rpx */  
			color: #212121;
			border: 1px solid #bfbfbf;
			border-radius: 13px;
			height: 52rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 20rpx;
			box-sizing: border-box;
			
		}
	}
}
</style>